<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <el-header class="header-container">
        <div class="headerTitle">查询条件</div>
        <div class="header-content">
          <el-form :model="headerSearchForm" label-width="auto" class="header-search-form">
            <el-form-item label="入口宽度">
              <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:120px" />
            </el-form-item>
            <el-form-item label="入口厚度" style="margin-left:5px">
              <el-input v-model="headerSearchForm.variableDescription" placeholder="请输入" style="width:120px" />
            </el-form-item>
            <el-form-item label="钢种" style="margin-left:-23px !important">
              <el-input v-model="headerSearchForm.variableName" placeholder="请输入" style="width:120px;margin:0" />
            </el-form-item>
            <el-form-item label="卷号" style="margin-left:-23px !important">
              <el-input v-model="headerSearchForm.variableName" placeholder="请输入" style="width:120px" />
            </el-form-item>
            <el-form-item label="开始时间" style="margin-left:5px">
                <el-date-picker
                    v-model="headerSearchForm.start"
                    type="datetime"
                    class="w-15vw"
                    placeholder="选择开始时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" style="margin-left:5px">
               <el-date-picker
                    v-model="headerSearchForm.end"
                    type="datetime"
                    class="w-15vw "
                    placeholder="选择结束时间">
               </el-date-picker>
            </el-form-item>
            

                
          </el-form>
          <div class="header-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="table-container-main">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="serialNumber" label="序号" fixed="left" width="40px">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="coilNumber" label="钢卷号" />
            <el-table-column prop="coilGrade" label="钢种" />
            <el-table-column prop="inWidth" label="入口宽度(mm)" width="65px" />
            <el-table-column prop="inThickness" label="入口厚度(mm)" width="65px"/>
            <el-table-column prop="outWidth" label="出口宽度(mm)" width="65px" />
            <el-table-column prop="outThickness" label="出口厚度(mm)" width="65px" />
            <el-table-column prop="planTime" label="计划下发时间" />
            <el-table-column label="轧制力(10kN)" header-align="center" >
                <el-table-column prop="ZS1" label="S1" width="65px"/>
                <el-table-column prop="ZS2" label="S2" width="65px"/>
                <el-table-column prop="ZS3" label="S3" width="65px"/>
                <el-table-column prop="ZS4" label="S4" width="65px"/>
                <el-table-column prop="ZS5" label="S5" width="65px"/>
            </el-table-column>
            <el-table-column label="张力(10kN)" header-align="center" >
                <el-table-column prop="ZHS1" label="S1" width="65px"/>
                <el-table-column prop="ZHS2" label="S2" width="65px"/>
                <el-table-column prop="ZHS3" label="S3" width="65px"/>
                <el-table-column prop="ZHS4" label="S4" width="65px"/>
                <el-table-column prop="ZHS5" label="S5"/>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="90">
              <template #default="scope">
                <!-- <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
                <el-button type="warning" @click="handleCheck(scope.row)">查看</el-button>
                <!-- <el-button type="primary" @click="handleQuote(scope.row)">引用</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
    <el-dialog v-model="dialogVisible" title="模型计算" style="text-align: left;width: 80%;height:90%;--el-dialog-title-font-size: 16px;margin-top:30px" >
        <el-row>
            <el-col style="font-size:12px">
                <div class="msg-title">基本信息</div>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
            <el-col :span="4" style="font-size:12px">
                <div>
                  <span>卷号</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:120px;height:20px;margin-left:4px;" />
                </div>
            </el-col>
            <el-col :span="4" style="font-size:12px;margin-left:10px">
                <div>
                  <span>钢种</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="4" style="font-size:12px;margin-left:10px">
                <div>
                  <span>屈服强度</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="4" style="font-size:12px;margin-left:10px">
                <div>
                  <span>出宽</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <span>出厚</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:100px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <span>入厚</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:100px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            
        </el-row>
        
        <el-row>
            <el-col style="font-size:12px">
                <div class="msg-title">轧制规程参数</div>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
            <el-col style="font-size:12px;">
                <el-table :data="rollingProcedureTable" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }" :cell-style="{fontSize:'12px'}">
                    <el-table-column prop="ITEM" label="ITEM" />
                    <el-table-column prop="UNIT" label="单位" />
                    <el-table-column prop="S1" label="STD1" />
                    <el-table-column prop="S2" label="STD2" />
                    <el-table-column prop="S3" label="STD3" />
                    <el-table-column prop="S4" label="STD4" />
                    <el-table-column prop="S5" label="STD5" />
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col style="font-size:12px">
                <div class="msg-title">仿真结果输出</div>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
            <el-col style="font-size:12px;">
                <el-table :data="simulationResultOutTable" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }" :cell-style="{fontSize:'12px'}">
                    <el-table-column prop="ITEM" label="ITEM" />
                    <el-table-column prop="UNIT" label="单位" />
                    <el-table-column prop="BEFORE" label="BEFORE" />
                    <el-table-column prop="STD1" label="STD1" />
                    <el-table-column prop="STD2" label="STD2" />
                    <el-table-column prop="STD3" label="STD3" />
                    <el-table-column prop="STD4" label="STD4" />
                    <el-table-column prop="STD5" label="STD5" />
                </el-table>
            </el-col>
        </el-row>

        <el-row style="margin-top:10px;margin-left:15px">
            <el-col style="font-size:12px;" :span="6">
              <div style="height: 160px;width:450px;">
                <nercar-echarts
                :title="option.title"
                :series="option.series"
                :legend="option.legend"
                :graphic="option.graphic"
                :tooltip="option.tooltip"
                :x-axis="option.xAxis"
                :y-axis="option.yAxis"
                :grid="option.grid"
                style="position:absolute;width:260px;height:240px !important;top:-30px"
                
                />
              </div>

            </el-col>
            <el-col style="font-size:12px;" :span="6">
              <div style="height: 160px;width:450px;">
                <nercar-echarts
                :title="option1.title"
                :series="option1.series"
                :legend="option1.legend"
                :graphic="option1.graphic"
                :tooltip="option1.tooltip"
                :x-axis="option1.xAxis"
                :y-axis="option1.yAxis"
                :grid="option1.grid"
                style="position:absolute;width:260px;height:240px !important;top:-30px"
                
                />
              </div>

            </el-col>
            <el-col style="font-size:12px;" :span="6">
              <div style="height: 160px;width:450px;">
                <nercar-echarts
                :title="option2.title"
                :series="option2.series"
                :legend="option2.legend"
                :graphic="option2.graphic"
                :tooltip="option2.tooltip"
                :x-axis="option2.xAxis"
                :y-axis="option2.yAxis"
                :grid="option2.grid"
                style="position:absolute;width:260px;height:240px !important;top:-30px"
                
                />
              </div>
            </el-col>
            <el-col style="font-size:12px;" :span="6">
              <div style="height: 160px;width:450px;">
                <nercar-echarts
                :title="option3.title"
                :series="option3.series"
                :legend="option3.legend"
                :graphic="option3.graphic"
                :tooltip="option3.tooltip"
                :x-axis="option3.xAxis"
                :y-axis="option3.yAxis"
                :grid="option3.grid"
                style="position:absolute;width:260px;height:240px !important;top:-30px"
                
                />
              </div>
            </el-col>
        </el-row>




        
    </el-dialog>


  </div>
</template>
<script lang="ts">
  import { ref, reactive, computed, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import { ElMessage } from 'element-plus';
  import '/@/views/RollingSimulation/rollingSimulationModelCommonStyle.less';

  interface SearchForm {
    productionLine: string;
    variableDescription: string;
    variableName: string;
    start:string,
    end:string
  }

  export default defineComponent({
    name: 'DataDictionary',
    setup() {
      // 表单数据
      const headerSearchForm = reactive<SearchForm>({
        productionLine: '',
        variableDescription: '',
        variableName: '',
        start:'',
        end:''
      });
      const dialogVisible = ref<boolean>(false);

      // 表格数据
      const tableData = ref([
        {
          coilNumber: 'M23132184C',
          coilGrade: 'SPCC-1DW',
          inWidth: '920',
          inThickness: '2.8',
          outWidth: '920',
          outThickness: '0.6',
          planTime: '2024-01-01 08:00:00',
          ZS1:'950.23',
          ZS2:'718.24',
          ZS3:'665.81',
          ZS4:'610.8',
          ZS5:'410.99',
          ZHS1:'13.4',
          ZHS2:'18.94',
          ZHS3:'13.86',
          ZHS4:'10.25',
          ZHS5:'7.74'

        }
      ]);

      const rollingProcedureTable=ref([
        {
          ITEM:"工作辊直径",
          UNIT:"mm",
          S1:"460",
          S2:"460",
          S3:"460",
          S4:"460",
          S5:"460"

        }
      ]);
      
      const simulationResultOutTable=ref([
        {
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        }
      ]);

      const option = {
        xAxis: {
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          name: '轧制力/10kN',
          nameTextStyle: {
            fontSize:'8px',
            color: "#6d7882",
          },
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
        },
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };
      const option1 = {
        xAxis: {
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            name: '强力/10kN',
            nameTextStyle: {
              fontSize:'8px',
              color: "#6d7882",
            },
            splitLine: {     //网格线
              "show": false
            },
            axisLabel: {
              fontSize: 10 // 设置字体大小为14
            },
        },
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };
      const option2 = {
        xAxis: {
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          name: '速度[m/min]',
          nameTextStyle: {
            fontSize:'8px',
            color: "#6d7882",
          },
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
        },
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };
      const option3 = {
        xAxis: {
            splitLine: {     //网格线
              "show": false
            },
            axisLabel: {
              fontSize: 10 // 设置字体大小为14
            },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            name: '功率/kW',
            nameTextStyle: {
              fontSize:'8px',
              color: "#6d7882",
            },
            splitLine: {     //网格线
              "show": false
            },
            axisLabel: {
              fontSize: 10 // 设置字体大小为14
            },
        },
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };

      const dataSourceType = ref('');


      const dataSourceTypeOptions = ref([
        { label: 'PLC', value: 'PLC' },
        { label: '传感器', value: '传感器' },
        { label: 'AI算法', value: 'AI算法' },
        { label: '称重传感器', value: '称重传感器' },
        { label: '电池管理系统', value: '电池管理系统' },
      ]);

      // 分页数据
      const pagination = reactive({
        currentPage: 1,
        pageSize: 10,
        total: tableData.value.length,
      });

      // 窗口大小变化处理
      const handleResize = () => {
        nextTick(() => {
          // 这里可以添加表格自适应高度的逻辑
        });
      };

      const handleCheck = (row: any) => {
        dialogVisible.value = true;
      }

      // 获取表格数据
      const fetchTableData = async () => {
        try {
          // 这里添加获取数据的API调用
          // const res = await api.getTableData({ ...headerSearchForm, ...pagination });
          // tableData.value = res.data;
          // pagination.total = res.total;
        } catch (error) {
          ElMessage.error('获取数据失败');
        }
      };

      // 查询方法
      const handleSearch = () => {
        pagination.currentPage = 1;
        fetchTableData();
      };

      // 重置方法
      const handleReset = () => {
        (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
          headerSearchForm[key] = '';
        });
        handleSearch();
      };


      // 删除方法
      const handleDelete = (row: any) => {
        // 这里添加删除逻辑
        console.log('删除', row);
      };

      // 分页大小变化
      const handleSizeChange = (val: number) => {
        pagination.pageSize = val;
        fetchTableData();
      };

      // 页码变化
      const handleCurrentChange = (val: number) => {
        pagination.currentPage = val;
        fetchTableData();
      };

      // 生命周期钩子
      onMounted(() => {
        // fetchTableData();
        window.addEventListener('resize', handleResize);
      });

      onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
      });

    const form = reactive({
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
    })

      return {
        headerSearchForm,
        tableData,
        pagination,
        handleSearch,
        handleReset,
        handleCheck,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        dataSourceTypeOptions,
        dataSourceType,
        dialogVisible,
        form,
        rollingProcedureTable,
        simulationResultOutTable,
        option,
        option1,
        option2,
        option3
      };
    },
  });
</script>
<style scoped lang="less">
.msg-title {
    top: -4vh;
    left: 39.5vw;
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2vh;
    font-weight: bolder;
    width: 10vw;
}
:deep(.el-table .cell) {
  line-height:14px

}
::v-deep .el-table--enable-row-transition .el-table__body td{
  padding-top: 4px;
  padding-bottom:4px;
}
</style>
